<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Main Page - YUI capabilities</title>

<style type="text/css">
@import "customJs/dhtmlgoodies-menubar/menu.css";
@import "yui-showcase.css";
@import "yui/yui-2.6.0/fonts/fonts-min.css" ;
@import "yui/yui-2.6.0/tabview/assets/skins/sam/tabview.css" ;

</style>

<script type="text/javascript" src="customJs/dhtmlgoodies-menubar/menu.js"></script>
<script type="text/javascript" src="yui/yui-2.6.0/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="yui/yui-2.6.0/element/element-beta-min.js"></script>
<script type="text/javascript" src="yui/yui-2.6.0/tabview/tabview-min.js"></script>

</head>
<body class=" yui-skin-sam">
<div id="libChooser" style="min-height: 110px;">
<ul>
	<li class="bounce"><span class="fisheyeTarget">Dojo</span><br>
	<div class="ilk">core js utilities, loads of widgets</div>
	</li>
	<li class="bounce"><span class="fisheyeTarget">Ext-JS</span><br>
	<div class="ilk">Out of box Eye Candy UI, pluggable, customizable</div>
	</li>
	<li class="bounce"><span class="fisheyeTarget">JQuery</span><br>
	<div class="ilk">Extremely compact, pluggable, microsoft endorsed</div>
	</li>
	<li class="bounce"><span class="fisheyeTarget">mootools</span><br>
	<div class="ilk">Flashy and compact library</div>
	</li>
	<li class="bounce"><span class="fisheyeTarget">prototype</span><br>
	<div class="ilk">Hugely popular, compact, UI using scriptaculous</div>
	</li>
	<li class="bounce"><span class="fisheyeTarget">yui</span><br>
	<div class="ilk">Pluggable, documented, lot of utilities and widgets</div>
	</li>
</ul>
</div>
<div style="clear: both;"></div>
<div id="menuBar">
<div id="dhtmlgoodies_menu">
<ul>
	<li><a href="http://www.dhtmlgoodies.com">YUI Form Components</a>
	<ul>
		<li><a href="http://www.dhtmlgoodies.com">Radio</a></li>
		<li><a href="http://www.dhtmlgoodies.com">Check Boxes</a></li>
		<li><a href="http://www.dhtmlgoodies.com">Validating Textbox</a></li>
		<li><a href="http://www.dhtmlgoodies.com">Text Area</a></li>
		<li><a href="http://www.dhtmlgoodies.com">Inline Editable labels</a></li>
		<li><a href="http://www.dhtmlgoodies.com">Editable Dropdowns</a></li>
		<li><a href="http://www.dhtmlgoodies.com">Tooltips</a></li>
	</ul>
	</li>
	<li><a href="http://www.dhtmlgoodies.com">YUI Complex Widgets</a>
	<ul>
		<li><a href="http://www.dhtmlgoodies.com">Tabs</a></li>
		<li><a href="http://www.dhtmlgoodies.com">Tree</a></li>
		<li><a href="http://www.dhtmlgoodies.com">Data Tables</a></li>
		<li><a href="http://www.dhtmlgoodies.com">Calendar</a></li>
		<li><a href="http://www.dhtmlgoodies.com">Progress Bar</a></li>
		<li><a href="http://www.dhtmlgoodies.com">Modal Dialog</a></li>
	</ul>
	</li>
	<li><a href="http://www.dhtmlgoodies.com">Fancy Stuff using YUI</a>
	<ul>
		<li><a href="http://www.dhtmlgoodies.com">Accordian</a></li>
		<li><a href="http://www.dhtmlgoodies.com">Drag-N-Drop</a></li>
		<li><a href="http://www.dhtmlgoodies.com">Animations</a></li>
		<li><a href="http://www.dhtmlgoodies.com">Image Manipulation</a></li>
		<li><a href="http://www.dhtmlgoodies.com">Color Chooser</a></li>
	</ul>
	</li>
	<li><a href="http://www.dhtmlgoodies.com">AJAX Interaction using YUI</a></li>
	<li><a href="http://www.dhtmlgoodies.com">PHD Topics</a>
	</li>
	<li><a href="http://www.dojotoolkit.org">More Help about YUI</a>
	</li>
</ul>
</div>

</div>
<div id="contentArea">The Content Area
<div id="mainTabContainer" class="yui-navset">
	<ul class="yui-nav">
		<li class="selected"><a href="#yuiFormComponents"><em>Form Components</em></a></li>
		<li><a href="#yuiComplex"><em>Complex Widgets</em></a></li>
		<li><a href="#yuiFancy"><em>The Oomph!</em></a></li>
	</ul>
	<div class="yui-content">
		<div id="yuiFormComponents">
			<div id="radio" class="subcontainer" >
				<span class="label">Radio Button Enhancements: </span>There are no specific enhancement to regular radio button in YUI. <br />
			</div>
			<div id="checkBox" class="subcontainer" >
				<span class="label">Checkbox Enhancements: </span>There are no specific enhancement to regular check boxes in YUI. <br />
			</div>
			<div id="textBox" class="subcontainer">
				<span class="label">TextBox Enhancements: </span>There are no specific enhancement to regular textbox in YUI. <br />
			</div>
			<div id="textArea" class="subcontainer">
				<span class="label">TextArea Enhancements: </span>There are no specific enhancement to regular textarea in YUI. <br />
			</div>
			<div id="inlineEdit" class="subcontainer">
				<span class="label">Inline EditBox</span> Clickable html text. Even though I am yet to become geeky enough with YUI to know how to do this, YUI does allow inline editing of the DataTable cells.<br />
				So given enought time and thought, I think it would be trivial to implement it for a single div/span.
			</div>
			<div id="editDropDwon" class="subcontainer">
				<span class="label">Editable Dropdown</span> What? YUI Does not bother with an editable dropdown too? Shame! <br />
			</div>
			<div id="toolTip" class="subcontainer"></div>
		</div>
		<div id="yuiComplex">
		</div>
		<div id="yuiFancy">
		</div>
	</div>
</div>
</div>
<div id="teaserArea">The Teaser Area</div>
<div id="statusBar"></div>
<div style="clear: both;"></div>

<script>
(function() {
    var tabView = new YAHOO.widget.TabView('mainTabContainer');
})();
</script>

</body>
</html>

